<template>
	<d2-container>
		<!-- 表格 -->
		<template>
			<div class="table-header">
				<el-button type="primary" @click="add">添加广告图</el-button>
			</div>
			
			<el-table :data="tableData" border style="width: 100%">
				<el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
				
				<el-table-column label="广告图片" prop="imageUrl" width="220" align="center">
					<template slot-scope="scope">
						<el-image class="photo" fit="contain" :src="scope.row.imageUrl" :preview-src-list="[scope.row.imageUrl]">
							<div slot="error" class="image-slot">
								<i class="el-icon-picture-outline"></i>
							</div>
						</el-image>
					</template>
				</el-table-column>
				<el-table-column label="标题" prop="title" align="center"></el-table-column>
				
				<el-table-column label="跳转方式" prop="targetType" width="220" align="center">
					<template slot-scope="scope">
						<template v-if="scope.row.targetType == 0">默认页面</template>
						<template v-if="scope.row.targetType == 1">小程序中指定页面</template>
						<template v-if="scope.row.targetType == 4">专题页面</template>
						<template v-if="scope.row.targetType == 2">公众号文章链接</template>
						<template v-if="scope.row.targetType == 3">指定外部小程序</template>
					</template>
				</el-table-column>
				<el-table-column label="展示位置" prop="moduleNo" width="160" align="center">
					<template slot-scope="scope">
						<template v-if="scope.row.moduleNo == 'index'">首页</template>
					</template>
				</el-table-column>
				<el-table-column label="排序" prop="sort" width="160" align="center"></el-table-column>
				
				<el-table-column label="状态" prop="adStatus" width="160" align="center">
					<template slot-scope="scope">
						<el-tag type="success" v-if="scope.row.adStatus == 1">正常</el-tag>
						<el-tag type="warning" v-if="scope.row.adStatus == 0">已下架</el-tag>
					</template>
				</el-table-column>
				
				<el-table-column label="操作" width="240" align="center" fixed="right">
					<template slot-scope="scope">
						<el-button type="primary" size="small" @click="viewDetail(scope.row)">查看详情</el-button>
						<el-button type="warning" size="small" @click="edit(scope.row)">编辑广告</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
		
		<!-- 翻页 -->
		<template slot="footer">
			<div class="page">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:total="total"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
				></el-pagination>
			</div>
		</template>
		
		<!-- 弹窗 -->
		<template>
			<!-- 添加、修改弹窗 -->
			<handle-carousel-dialog
				:isShow="showHandleDialog"
				:isEdit="isEdit"
				:item="currentItem"
				@submit="getData"
				@close="closeHandleDialog"
			></handle-carousel-dialog>
			
			<!-- 查看详情弹窗 -->
			<carousel-detail-dialog
				:isShow="showDetailDialog"
				:id="currentId"
				:item="currentItem"
				@close="closeDetailDialog"
			></carousel-detail-dialog>
		</template>
	</d2-container>
</template>

<script>
	import { getCarouselList } from '@api/platform/platformBanner'
	import handleCarouselDialog from './components/handle-carousel-dialog'
	import carouselDetailDialog from './components/carousel-detail-dialog'
	export default {
		components: {
			handleCarouselDialog,
			carouselDetailDialog
		},
		data() {
			return {
				tableData: [],
				currentPage: 1,
				pageSize: 10,
				total: 0,
				
				showHandleDialog: false, //添加弹窗
				showDetailDialog: false, //详情弹窗
				isEdit: false,
				currentId: 0,
				currentItem: {}
			}
		},
		methods: {
			getData() { //获取列表
				getCarouselList({
					moduleNo: 'index',
					pageNum: this.currentPage,
					pageSize: this.pageSize
				})
					.then(res => {
						this.tableData = res.data.content;
						this.total = res.data.total;
					})
			},
			
			handleSizeChange(val) { //处理显示条数
				this.pageSize = val;
				this.getData();
			},
			handleCurrentChange(val) { //处理翻页
				this.currentPage = val;
				this.getData();
			},
			forDate(row, column) { //时间格式化
				if(column.property == 'createTime') {
					return row.createTime == null ? '' : dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss')
				}
			},
			
			// 列表操作
			add() { //添加按钮
				this.showHandleDialog = true;
			},
			edit(item) { //编辑
				this.currentItem = item;
				this.isEdit = true;
				this.showHandleDialog = true;
			},
			closeHandleDialog() {
				this.showHandleDialog = false;
				this.isEdit = false;
			},
			
			viewDetail(item) { //查看详情
				this.currentId = item.id;
				this.currentItem = item;
				this.showDetailDialog = true;
			},
			closeDetailDialog() {
				this.showDetailDialog = false;
			},
		},
		mounted() {
			this.getData();
		}
	}
</script>

<style lang="scss" scoped>
	.photo {
		width: 160px;
		height: 120px;
		object-fit: cover;
		
		::v-deep .image-slot {
			width: 160px;
			height: 120px;
			background: #eee;
			align-items: center;
			justify-content: center;
			display: flex;
		}
	}
	
	::v-deep .v-modal {
		z-index: 888!important;
	}
</style>